<template>
  <div class="register">
    <h2>注册页</h2>
    <div class="text">
      <input  type="text" v-model="resg.tel" placeholder="输入手机号">
    </div>
    <div class="text">
      <input type="password" v-model="resg.psw" placeholder="输入密码">
    </div>
    <div class="text">
      <input type="password" v-model="resg.checkpsw" placeholder="确认密码">
    </div>
    <div class="btn">
      <button @click="register">注册</button>
    </div>
  </div>
</template>

<script>
import { user_register } from '../utils/api'
export default {
  data() {
    return {
      resg: {
        tel: '',
        psw: '',
        checkpsw:''
      }
    }
  },
  methods: {
    register() {
      // console.log(this.res);
      // if (/^1[3-9]\d{9}$/.test(this.res.tel) == false) {
      //   alert('请重新输入手机号')
      // } else if (!this.res.psw || !this.res.checkpsw) {
      //   alert('请输入密码/确认密码')
      // } else if (this.res.psw !== this.res.checkpsw) {
      //   alert('密码和确认密码不一致');
      // } else {


      if (/^1[3-9]\d{9}$/.test(this.resg.tel) == false) {
        // alert('请输入合法的手机号');
      } else if (!this.resg.psw || !this.resg.checkpsw) {
        alert('请输入密码/确认密码')
      } else if (this.resg.psw !== this.resg.checkpsw) {
        alert('密码和确认密码不一致');
      } else { //验证通过 

        //深拷贝resg
        var newresg = JSON.parse(JSON.stringify(this.resg));
        //删除对象的checkpass属性
        delete newresg.checkpsw;

        //发起注册请求
        user_register(newresg).then((res) => {
          if (res.data.code == 200) { //注册成功
            alert('注册成功!')
            //跳转到登录页
            this.$router.push('/login');
          } else {
            alert(res.data.msg);

          }
        })

      }
    }
  }
}
</script>

<style lang="scss" scoped>
h2{
  margin-top: 10px;
  text-align: center;
}
.text{
  text-align: center;
  margin-top: 20px;
}
input{
  text-align: center;
  width:95%;
height: 40px;
// background-color: rgb(177, 194, 183);

border: 1px solid #9f9999;
// outline: none;
border-radius: 20px;
}
button{
  width: 95%;
  height: 40px;
  color: white;
    background-color:rgb(123, 190, 147);
    outline: none;
    border: 0px;
    border-radius: 20px;

}
.btn{
  margin-top: 30px;
  text-align: center;

}
</style>